<template>
    <div class="cart_wrap">
        <!-- 顶部导航栏 -->
        <div class="nav_cart">
            <img src="https://a.vpimg2.com/upload/upimg2/slogan/cartHeader.png" class="nav_cart_logo" alt="">
            <div class="nav_cart_right_box">
                <ul class="nav_cart_list_top nav_cart_list">
                    <li>你好, ph_******<span class="cart_lis_pos_icon"></span></li>
                    <li>[退出]</li>
                    <li>订单管理</li>
                    <li class="shuxian"></li>
                    <li><i class="iconfont icon-dianhua" style="padding-right: 3px; font-size: 14px;color: #b5b5b5;"></i>400-6789-888</li>
                    <li class="shuxian"></li>
                    <li><i class="iconfont icon-kefu" style="padding-right: 3px; font-size: 14px;color: #b5b5b5;"></i>在线客服</li>
                    <li class="shuxian"></li>
                    <li><i class="iconfont icon-u705" style="padding-right: 3px; font-size: 14px;color: #b5b5b5;"></i>会员服务</li>
                </ul>
                <ul class="nav_cart_list_bottom nav_cart_list">
                    <li><span class="cart_lis_pos_icon1"></span>100% 正品保证</li>
                    <li><span class="cart_lis_pos_icon2"></span>七天无理由放心退</li>
                    <li><span class="cart_lis_pos_icon3"></span>限时抢购</li>
                </ul>
            </div>
        </div>
        <div class="cart_tab_box">
            <div class="cart_tab_box_border">特卖商品</div>
        </div>
        <div class="cart_address_box">
            <p class="cart_address_span">配送至 <b>{{address}}</b></p>
            <div class="cart_address_H"></div>
            <p class="cart_address_p">
                勾选商品 “ 
                <img src="https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/multiplechoice_selected_normal-hash-e072799d.png" class="cart_address_pic" alt="">
                 ” 即可锁定库存20分钟, 倒计时内不用担心商品被抢走~
            </p>
        </div>
        <ul class="cart_taber_list">
            <li>商品</li>
            <li>单价</li>
            <li>数量</li>
            <li>操作</li>
        </ul>
        <div class="cart_tit_zy">唯品自营</div>
        <ul class="cart_list_table_box">
            <div class="cartFlag" v-show="cartListFlag">
                <div class="cartListFlagImg"></div>
                <h1>购物车空空如也。快去购物吧！</h1>
            </div>
            <li class="cart_list_table_lis" v-for="item,index in cartList" :key="index">
                <input type="checkbox" class="cart_inp_lis" @click="checked(index)" v-model="item.checked">
                <img :src="item.pic" class="cart_pic_box" alt="">
                <div class="cart_product_info">
                    <p class="cart_product_size1">{{ item.name }}</p>
                    <div class="cart_product_size2">  {{ item.color.color }}  {{ item.size.siz }}</div>
                </div>
                <div class="cart_price">¥{{ item.price }}</div>
                <div class="cart_button_box">
                    <button class="cart_decreases" @click="cart_JJ(index)">-</button>
                    <input type="text" :value="item.count">
                    <button class="cart_add" @click="cart_add(index)">+</button>
                </div>
                <!-- <button class="cart_del">删除</button> -->
                <el-popover
                    placement="top"
                    width="160"
                    v-model="item.visible">
                    <p>这是一段内容这是一段内容确定删除吗？</p>
                    <div style="display:flex;text-align: right; margin: 0">
                        <el-button style="width: 80px;height: 30px;" size="mini" type="primary" @click="quxiao(index)">取消</el-button>
                        <el-button style="width: 80px;height: 30px;background: red;" type="primary" size="mini" @click="queding(index)">确定</el-button>
                    </div>
                </el-popover>
                <button slot="reference" @click="delFn(index)" class="cart_del">删除</button>

            </li>
        </ul>
        <!-- 结算 -->
        <div class="cart_Settlement_box">
            <div class="cart_inp_box">
                <input type="checkbox" v-model="checkAll" @click="checkAllFn">
                <span>全选</span>
            </div>
            <div class="SettleAccount_text">共<span class="cart_length"> {{ total_num }} </span>件商品 总金额 <span class="cart_price">¥{{ total_price }}</span></div>
            <div class="SettleAccount_Yes">立即结算</div>
        </div>
        <div class="cart_flex_box">
            <div class="cart_flex_backImage1"></div>
            <div class="cart_flex_backImage2"></div>
            <div class="cart_flex_backImage3"></div>
        </div>
        <div class="cart_footer_wrap">
                <div class="cart_footer_title">
                    <a href="javascript:;">关于我们</a>
                    <span></span>
                    <a href="javascript:;">About us</a>
                    <span></span>
                    <a href="javascript:;">Investor Relations</a>
                    <span></span>
                    <a href="javascript:;">ESC</a>
                    <span></span>
                    <a href="javascript:;">唯品会公益</a>
                    <span></span>
                    <a href="javascript:;">品牌招商</a>
                    <span></span>
                    <a href="javascript:;">平台规则</a>
                    <span></span>
                    <a href="javascript:;">隐私条款</a>
                    <span></span>
                    <a href="javascript:;">服务条款</a>
                    <span></span>
                    <a href="javascript:;">唯品诚聘</a>
                    <span></span>
                    <a href="javascript:;">唯品卡</a>
                    <span></span>
                    <a href="javascript:;">联系我们</a>
                    <span></span>
                    <a href="javascript:;">廉正举报</a>
                </div>
                <div class="cart_footer_content">
                    <div>Copyright © 2008-2024 vip.com，All Rights Reserved  使用本网站即表示接受 唯品会用户协议。版权所有 广州唯品会电子商务有限公司</div>
                    <div><img src="https://a.vpimg4.com/upload/actpics/act/sp/police_icon.png" style="width:12px;height:12px;padding-right: 3px;margin-bottom: 0;" alt="">粤公网安备 44010302111111号    粤ICP备08114786号 增值业务经营许可证：粤B2-20170777 网络文化经营许可证：粤网文〔2024〕2309-170号</div>
                    <div>经营主体证照   风险监测信息   互联网药品信息服务资格证书：（粤）-经营性-2023-0508 网络食品交易第三方平台备案凭证：粤B2-20170777 医疗器械网络交易服务第三方平台备案</div>
                    <div>凭证：（粤）网械平台备字[2019]第00001号 出版物网络交易平台服务经营备案证：粤新出网备（2021）1号  未成年人关怀专区</div>
                    <div>药品网络交易服务第三方平台备案凭证：（粤）网药平台备字[2023] 002号 违法和不良信息举报电话：4006789888 算法推荐违规举报电话：4006789888 广东省放心消费承诺单位</div>
                </div>
                <div class="cart_footer_pic">
                    <div class="cart_footer_pic1"></div>
                    <div class="cart_footer_pic2"></div>
                    <div class="cart_footer_pic3"></div>
                    <div class="cart_footer_pic4"></div>
                </div>
        </div>
    </div>
</template>

<script>

    export default{
        data(){
            return{
                cartListFlag:false,
                bannerList:[
                    {id:0,carousel:"https://img2.baidu.com/it/u=2227899634,1580731753&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800"},
                    {id:1,carousel:"https://b0.bdstatic.com/18ff0bb051fcf581a49e50ae94a5fab6.jpg@h_1280"},
                    {id:2,carousel:"https://img0.baidu.com/it/u=1217743670,2594546688&fm=253&fmt=auto&app=138&f=JPEG?w=1422&h=800"},
                ],
                checkAll:false,  //全选
                visible:false,
                cartList:[
                    // {
                    //     id:0,
                    //     img:"https://a.vpimg2.com/upload/merchandise/pdcvis/2024/08/31/173/acaaac9e-1623-4d86-bb9a-47921211fd6b.jpg",
                    //     title:"【拒水鸭绒】意大利小帆船防水防污连帽羽绒外套男士短装羽绒服1",
                    //     dimension:"冰河灰; 2XL",
                    //     price:1000,
                    //     itemPrice:1000,
                    //     count:1,
                    //     checked:true,
                    //     visible:false,
                    // },
                ],
                address:""
            }
        },
        methods:{
            // -
            cart_JJ(val){
                let data = this.cartList.find((item,index)=>{
                    return index == val
                })
                if(data.count <= 1){
                    data.count = 1
                }else{
                    data.count--
                    data.itemPrice = data.count * data.price
                }
                // total_price()
            },
            // +
            cart_add(val){
                let data = this.cartList.find((item,index)=>{
                    return index == val
                })
                data.count++
                data.itemPrice = data.count * data.price
                // total_price()
                // console.log(this.cartList);
            },
            // 点击单选
            checked(val){
                let data = this.cartList.find((item,index)=>{
                    return index == val
                })
                data.checked = !data.checked
                // console.log(data.checked)
                // Every 
                let CartFlag = this.cartList.every((item,index)=>{
                    return item.checked == true
                })
                this.checkAll = CartFlag
            },
            // 全选 绝定 单选
            checkAllFn(){
                this.cartList.forEach(item=>{
                    item.checked = !this.checkAll
                })
            },
            // 删除
            delFn(val){
                let data = this.cartList.find((item,index)=>{
                    return index == val
                })
                data.visible = !data.visible
                console.log(val)
            },
            // 取消删除
            quxiao(val){
                let data = this.cartList.find((item,index)=>{
                    return index == val
                })
                data.visible = false  //取消弹窗
            },
            // 确认删除
            queding(val){
                // this.visible = false  //取消弹窗
                this.cartList.splice(val,1)
            },

            // 封装方法 进页面判断单选是否全部选中   
            pd(){
                // 获取选中的checked
                let cheLen = this.cartList[0].checked
                let len = this.cartList.length

                console.log("全选是否选中:::",cheLen,len)

                this.checkAll = cheLen==len
            }
        },

        // 计算属性
        computed:{
            // 计算选中的数量
            total_num(){
                let t_num = 0  //默认=0
                this.cartList.forEach(item=>{
                    t_num += item.checked == true?1:0
                })
                return t_num
            },
            // 计算总金额
            total_price(){
                let price = 0  //默认=0
                this.cartList.forEach(item=>{
                    price += item.checked?item.itemPrice:0 * item.checked?item.count:0
                })
                // console.log(price)
                return price
            }
            // 判断如果购物车没有数据 数组为0  显示
        },

        // 数据监听
        watch:{
            // 监听购物车数组是否为0
            cartList:{
                handler(newVal,oldVal){
                    if(newVal.length != 0){
                        console.log("不为0")
                        this.cartListFlag = false
                    }else{
                        this.cartListFlag = true
                    }
                },
                deep:true, //深度监听
                immediate:true  //立刻监听
            }
        },
        created(){
            this.cartList = this.$route.params.array;
            console.log("数组购物车:::",this.cartList)

            console.log("配送地址",this.$route.params.title)
            this.address = this.$route.params.title

            this.pd()
        }

    }
</script>

<style scoped>
ul,li{
    list-style: none;
    margin: 0;
    padding: 0;
}
.cart_wrap{
    width: 1270px;
    padding: 0 150px;
    /* background: #eee; */
    margin: 0 auto;
    box-sizing: border-box;
}
    .nav_cart{
        width: 100%;
        height: 80px;
        /* background: #eee; */
        border-bottom: 2px solid grey;
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .nav_cart_logo{
        width: 214px;
        height: 48px;
    }
    .nav_cart_right_box{
        width: 575px;
        height: 70px;
        /* background: #ddd; */
        display: flex;
        flex-direction: column;
        align-items: end;
        justify-content: space-evenly;
        color: grey;
        font-size: 12px;
    }
    .nav_cart_list{
        width: 620px;
        height: 30px;
        /* background: #ddd; */
        display: flex;
        align-items: center;
        justify-content: end;
    }
    .nav_cart_list li{
        margin-right: 14px;
        display: flex;
        align-items: center;
    }
    .nav_cart_list_bottom li{
        color: #333;
    }
    .cart_lis_pos_icon{
        display: inline-block;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
        background-position: -372px -253px;
        width: 26px;
        height: 26px;
        margin: 3px;
    }
    .cart_lis_pos_icon1{
        display: inline-block;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
        background-position: -587px -145px;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
    .cart_lis_pos_icon2{
        display: inline-block;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
        background-position: -432px -253px;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }
    .cart_lis_pos_icon3{
        display: inline-block;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites-hash-29a8cdc6.png);
        background-position: -587px -169px;
        width: 20px;
        height: 20px;
        margin-right: 6px;
    }



    .shuxian{
        width: 1px;
        height: 14px;
        background: grey;
    }

    .cart_tab_box{
        width: 100%;
        border-bottom: 1px solid #777;
    }
    .cart_tab_box_border{
        width: 100px;
        color: #f10180;
        font-weight: bold;
        font-size: 18px;
        padding-bottom: 15px;
        cursor: pointer;
        border-bottom: 2px solid #f10180;
    }

    .cart_address_box{
        width: 100%;
        height: 80px;
        margin: 30px 0;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
    }
    .cart_address_span{
        font-size: 18px;
    }
    .cart_address_H{
        width: 1px;
        height: 18px;
        background-color: #806d6d;
        margin: 0 8px;
    }
    .cart_address_p{
        color: #666;
    }
    .cart_address_pic{
        width: 16px;
        height:16px;
        margin: 0;
        padding: 0;
    }

    .cart_taber_list{
        width: 100%;
        height: 40px;
        border: 1px solid #e0e0e0;
        color: #333;
        font-size: 16px;
        display:flex;
        justify-content: space-around;
        align-items: center;
        font-size: 16px;
    }
    .cart_tit_zy{
        width: 100%;
        height: 30px;
        line-height: 40px;
        padding: 0 20px;
        box-sizing: border-box;
        color: #f10180;
        text-align: start;
        margin: 20px 0;
    }

    .cart_list_table_box{
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        border: 1px solid #e0e0e0;
    }
    /* 购物车为空的  */
    .cartFlag{
        width: 600px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .cartListFlagImg{
        width: 120px;
        height:120px;
        background-image: url(https://ccp.vipstatic.com/img/cart/te/4/cart/sprites-hash-bce65243.png?df81f12b);
        background-position: -164px 0;
    }
    .cart_list_table_lis{
        width: 100%;
        height: 80px;
        /* background: #ddd; */
        display: flex;
        justify-content: space-between;
        padding: 0 6px;
        margin-bottom: 8px;
        box-sizing: border-box;
        align-items: center;
    }
    .cart_inp_lis{
        width: 16px;
        height: 16px;
        cursor: pointer;
    }
    .cart_product_info{
        width: 180px;
        height: 90px;
        text-align: start;
        display:flex;
        flex-direction: column;
        justify-content: center;
    }
    .cart_pic_box{
        width: 80px;
        height: 80px;
    }
    .cart_product_size1{
        font-size: 12px;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin-top:6px;
    }
    .cart_product_size2{
        font-size: 12px;
    }
    .SettleAccount_text{
        width:240px;
        height: 30px;
        line-height: 30px;
        /* background: #ddd; */
        font-size: 14px;
    }
    .cart_inp_box{
        /* height: 17px; */
        /* background: #ddd; */
        display: flex;
        align-items: center;
        font-size: 14px;
        line-height: 40px;
    }
    .cart_inp_box input{
        width: 16px;
        height: 16px;
        margin-right: 6px;
        cursor: pointer;
    }
    .cart_length{
        color: red;
        font-weight: bold;
    }
    .cart_price{
        width: 100px;
        /* background: #ddd; */
        color: #f10180;
        font-weight: bold;
        font-size: 16px;
    }
    .cart_button_box{
        /* width: 68px; */
        /* height: 22px; */
        border: 1px solid #f10180;
    }
    .cart_button_box button{
        width: 22px;
        height: 22px;
        border: none;
        color: #f10180;
        background: #fff;
        font-size: 16px;
        cursor: pointer;
    }
    .cart_button_box input{
        width: 20px;
        height: 19px;
        border: none;
        border-left: 1px solid #f10180;
        border-right: 1px solid #f10180;
        outline: none;
        text-align: center;
    }
    .cart_del{
        width: 60px;
        height: 30px;
        border:none;
        cursor: pointer;
        border-radius: 4px;
        background: none;
    }

    /* 结算 */
    .cart_Settlement_box{
        width: 100%;
        height: 50px;
        border: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 50px 0;
        padding: 0 0 0 20px;
        box-sizing: border-box;
    }
    .SettleAccount_Yes{
        width:200px;
        height: 100%;
        line-height: 50px;
        font-size: 18px;
        background: #d0d0d0;
        color: #999;
        cursor: pointer;
    }

    .cart_flex_box{
        width: 100%;
        height: 140px;
        margin-bottom: 40px;
        display: flex;
        justify-content: space-between;
    }
    .cart_flex_backImage1{
        width: 300px;
        height: 141px;
        background: #eee;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites3-hash-52740139.png);
        background-position: -306px 0;
    }
    .cart_flex_backImage2{
        width: 300px;
        height: 141px;
        background: #eee;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites3-hash-52740139.png);
        background-position: 0 0;
    }
    .cart_flex_backImage3{
        width: 300px;
        height: 141px;
        background: #eee;
        background-image: url(https://shop.vipstatic.com/v2/dist/front/biz/cart/asset/img/te5/commons/sprites3-hash-52740139.png);
        background-position: 0 -145px;
    }
    .cart_footer_wrap{
        width: 100%;
        padding: 40px 0 18px 0;
        border-top: 1px solid #ebebeb;
        margin: 0 auto;
    }
    .cart_footer_title{
        height: 30px;
        background: #d7237e;
        line-height: 30px;
    }
    .cart_footer_title a{
        text-decoration: linen;
        color: #fff;
        font-size: 12px;
    }
    .cart_footer_title span{
        display: inline-block;
        width: 1px;
        height: 10px;
        background: #fff;
        margin: 0px 4px;
    }
    .cart_footer_content{
        width: 100%;
        padding: 20px 0;
        line-height: 20px;
    }
    .cart_footer_content div{
        font-size: 12px;
        color: grey;
        cursor: pointer;
    }
    .cart_footer_pic{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .cart_footer_pic .cart_footer_pic1{
        width: 110px;
        height: 30px;
        background-image: url(https://shop.vipstatic.com/img/common/footer-hash-3de6f1ae.png?939748fb);
        background-repeat: no-repeat;
    }
    .cart_footer_pic .cart_footer_pic2{
        width: 110px;
        height: 30px;
        background-image: url(https://shop.vipstatic.com/img/common/footer_no_good-hash-1fe63524.png?64f2e6d6);
        background-repeat: no-repeat;
    }
    .cart_footer_pic .cart_footer_pic3{
        width: 110px;
        height: 30px;
        background-image: url(https://shop.vipstatic.com/img/common/footer-hash-3de6f1ae.png?939748fb);
        background-repeat: no-repeat;
        background-position: 0 -154px;
    }
    .cart_footer_pic .cart_footer_pic4{
        width: 110px;
        height: 30px;
        background-image: url(https://shop.vipstatic.com/img/common/footer-hash-3de6f1ae.png?939748fb);
        background-repeat: no-repeat;
        background-position: 0 -256px;
    }

    


</style>